<template>
  <el-container style="min-height: 100vh;">
    <!-- 侧边栏 -->
    <el-aside :width="asideWidth" style="background-color: #001529;">
      <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
        <img src="@/assets/logo.png" style="width: 40px; height: 40px;">
      </div>
      <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          style="border: none"
          background-color="#001529"
          active-text-color="#fff"
          text-color="rgba(255,255,255,0.65)"
          :default-active="activeMenu"
          router>
        <el-menu-item index="/">
          <i class="el-icon-house"></i>
          <span>系统首页</span>
        </el-menu-item>
        <el-menu-item index="/element">
          <i class="el-icon-house"></i>
          <span>Element页面</span>
        </el-menu-item>
        <el-submenu index="/info-management">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </template>
          <el-menu-item index="/" class="home-item"><span>用户信息</span></el-menu-item>
          <el-menu-item index="/other-info">其他信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header style="height: 60px; background-color: #f5f5f5; display: flex; align-items: center;box-shadow: 2px 0 6px rgba(0,21,41,.35);">
        <i :class="collapseIcon" style="font-size: 26px; cursor: pointer;" @click="handleCollapse"></i>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="flex: 1; text-align: center; display: flex; width: 0; justify-content: flex-end;" @click="handlefull">
          <i class="el-iconquanping" style="font-size: 26px"></i>
          <el-dropdown placement="bottom">
            <div style="display: flex;align-items: center; cursor: default">
              <img src="@/assets/logo.png" style="width: 30px; height: 30px; margin: 0 5px" alt="用户头像">
              <span>管理员</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 内容 -->
      <el-main>
        <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
          good morning
        </div>
        <div style="display: flex">
          <el-card style="width: 30%; margin-right: 10px">
            <div slot="header" class="clearfix"><span>2024</span></div>
            <div>
              2024
              <div style="margin-top: 20px">
                <div style="margin: 10px 0"><strong>主题色</strong></div>
                <el-button plain round>Element独特的按钮</el-button>
                <el-button type="primary" plain round>主要的按钮</el-button>
                <el-button type="danger" plain round>危险按钮</el-button>
                <el-button type="warning" plain round>警告按钮</el-button>
                <el-button type="info" plain round>信息按钮</el-button>
                <el-button type="success" plain round>成功的按钮</el-button>
                <el-button plain round>默认的按钮</el-button>
              </div>
            </div>
          </el-card>
          <el-card style="width: 70%;">
            <div slot="header" class="clearfix"><span>渲染用户的数据</span></div>
            <div>
              <el-table class="user" :data="users" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="头像">
                  <template #default="scope">
                    <el-image :src="scope.row.avatar || require('@/assets/默认.png')" style="width: 50px; height: 50px;cursor: pointer;" @click="preview(scope.row.avatar)"></el-image>
                  </template>
                </el-table-column>
                <el-table-column label="文件上传">
                  <template v-slot="scope">
                    <el-upload
                        action="http://localhost:9090/file/upload"
                        :headers="{token: user.token}"
                        :show-file-list="false"
                        :on-success="(row, file, fileList) => handleTableFileUpload(scope.row, file, fileList)">
                      <el-button size="mini" type="primary">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
        <div style="display: flex; margin: 10px 0">
          <el-card style="width: 50%; margin-right: 10px" class="el-card is-always-shadow">
            <div slot="header" class="clearfix">
              <span>文件上传与下载</span>
            </div>
            <div style="margin-bottom: 10px">
              <el-upload
                  action="http://localhost:9090/file/upload"
                  :headers="{token: user.token}"
                  :file-list="fileList"
                  list-type="picture"
                  :on-success="handleFileUpload">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
            <div style="margin-bottom: 10px">
              <el-upload
                  action="http://localhost:9090/file/upload"
                  :headers="{token: user.token}"
                  :file-list="fileList"
                  :on-success="handleMultipleFileUpload"
                  :multiple="true">
                <el-button style="margin-bottom: 10px" size="mini" type="success">多文件上传</el-button>
              </el-upload>
              <el-button type="primary" style="margin: 0" @click="showUrls">显示上传的链接</el-button>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'MainLayout',
  data() {
    return {
      isCollapse: false,
      asideWidth: '200px',
      activeMenu: this.$route.path,
      collapseIcon: 'el-icon-s-fold',
      users: [], // 初始数据为空数组
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      fileList: [],
      urls:[],
    };
  },
  async mounted() {
    try {
      const res = await request.get("/userAll");
      console.log("完整的响应数据:", res);
      if (Array.isArray(res)) {
        this.users = res; // 确保后端返回的是数组
      } else {
        console.error('Expected an array but got:', res);
      }
    } catch (error) {
      console.error("请求失败:", error);
      // 可以在此处添加错误提示给用户
    }
  },
  watch: {
    '$route.path': function(newPath) {
      this.activeMenu = newPath;
    }
  },
  methods: {
    preview(urls){
      window.open(urls)
    },
    showUrls() {
      console.log(this.fileList)
    },
    handleMultipleFileUpload(response, file, fileList) {
      let urls=fileList.map(v => v.response?.data);
      console.log(urls);
    },
    handleTableFileUpload(row, file, fileList) {
      console.log(row, file, fileList);
      row.avatar = file.response.data; // 确保 file.response.data 是返回的文件路径
      console.log(row);
      request.put("/update", row).then(res => {
        if (res.code === '200') {
          this.$message.success('更新成功');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleFileUpload(response, file, fileList) {
      this.fileList = fileList;
    },
    handlefull() {
      document.documentElement.requestFullscreen();
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    logout() {
      localStorage.removeItem('honey-user');
      this.$router.push('/login');
      this.$message.success('你已经成功注销');
    }
  }
};
</script>

<style>
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  color: #fff !important;
}
.el-submenu__title:hover i {
  color: #fff !important;
}
.el-menu-item.is-active {
  background-color: #40a9ff !important;
  border-radius: 5px !important;
  width: calc(100%);
}
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu .el-menu-item {
  min-width: 0 !important;
}
.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}
.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;
}
.home-item span {
  margin-left: 4px;
}
.el-table {
  width: 100%; /* 确保表格占满容器 */
}
.el-table th, .el-table td {
  text-align: left; /* 确保表头和表格内容都左对齐 */
}
.user .el-table-column {
  width: 10px;
}
</style>